<template>
    <el-page-header @back="router.go(-1)" title="返回">
        <template #content>
            <span>{{ storeForm.id ? '编辑' : '添加' }}店铺</span>
        </template>
    </el-page-header>

    <div class="content">
        <el-form ref="foodFormRef" :model="storeForm" :rules="foodFormRule" :inline="false" label-width="160px">

            <el-form-item label="名称" prop="name">
                <el-input v-model="storeForm.name" placeholder="请输入名称" maxlength="20" style="width: 300px;" />
            </el-form-item>

            <el-form-item label="起送费" prop="price">
                <el-input v-model="storeForm.deliveryStartPay" placeholder="请输入价格" maxlength="12" style="width: 200px;" />
            </el-form-item>

            <el-form-item label="配送费" prop="price">
                <el-input v-model="storeForm.deliveryPay" placeholder="请输入配送费" maxlength="12" style="width: 200px;" />
            </el-form-item>

            <el-form-item label="营业时间" prop="price">
                <el-select v-model="storeForm.startWeek" placeholder="开始时间" style="width: 100px;">

                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
                    </el-option>
                </el-select>
                --
                <el-select v-model="storeForm.endWeek" placeholder="结束时间" style="width: 100px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="商铺分类">
                <div>
                    <div style="margin-bottom: 10px;">
                        <el-select v-model="storeForm.storeCategoryName" @change="handleChangeFlavor"
                            style="width: 120px;margin-right: 20px;">
                            <el-option v-for="item in storeCategoryList" :key="item.categoryId" :label="item.categoryName"
                                :value="item.categoryName" />
                        </el-select>
                    </div>
                    <el-button type="success" @click="handleAddStoreItem">添加分类</el-button>
                </div>
            </el-form-item>

            <el-form-item label="商铺图片:" prop="image">

                <el-upload class="avatar-uploader" action="http://localhost:9500/file/upload"
                    :headers="{ token: token }" :show-file-list="false" :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="storeForm.storeImg" :src="storeForm.storeImg" style="width:178px;height:178px;" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>

            <el-form-item label="描述">
                <el-input v-model="storeForm.storeDesc" type="textarea" />
            </el-form-item>

            <el-form-item>
                <el-button @click="handleSave">保存</el-button>
                <el-button type="primary" @click="handleCancle">取消</el-button>
            </el-form-item>
        </el-form>


        <!--用户对话框-->
        <el-dialog v-model="dialogFormVisible" title="添加分类">
            <el-form ref="flavorFormRef" :model="storeCategoryForm" :rules="flavorFormRule">
                <el-form-item label="名称" prop="name">
                    <el-input placeholder="请输入名称" v-model="storeCategoryForm.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">关&nbsp;&nbsp;闭</el-button>
                    <el-button type="primary" @click="handleCategorySave">提&nbsp;&nbsp;交</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { findStoreById,saveStoreInfo } from "@/api/store"
import {saveStoreCategory,getStoreCategoryList} from "@/api/storeCategory"
import { ElMessage } from 'element-plus'

const router = useRouter();
const route = useRoute();

let options = reactive([
    {
        value: 'Monday',
        label: '星期一'
    },
    {
        value: 'Tuesday',
        label: '星期二'
    },
    {
        value: 'Wednesday',
        label: '星期三'
    },
    {
        value: 'Thursday',
        label: '星期四'
    },
    {
        value: 'Friday',
        label: '星期五'
    },
    {
        value: 'Saturday',
        label: '星期六'
    },
    {
        value: 'Sunday',
        label: '星期日'
    }
])

let storeForm = reactive({
    id: null,
    name: null,
    deliveryStartPay: null,
    deliveryPay: null,
    storeCategoryId:null,
    storeCategoryName: null,
    storeImg: null,
    storeDesc: null,
    startWeek: null,
    endWeek: null
});
let storeCategoryForm=reactive({
    name:""
})

let foodFormRule = reactive({
    name: [
        {
            required: true,
            trigger: 'blur'
        }
    ],
    price: [
        {
            required: true,
            trigger: 'blur'
        }
    ],
    categoryId: [
        {
            required: true,
            trigger: 'blur'
        }
    ]
})
const token = sessionStorage.getItem("token");

let dialogFormVisible = ref(false);
let storeCategoryList = reactive([
    {
        categoryId: '1',
        categoryName: '药店'
    },
    {
        categoryId: '2',
        categoryName: '粉店'
    },
    {
        categoryId: '3',
        categoryName: '饭店'
    }
]);
let storeList = reactive([]);



if(route.query.storeId){
  //根据id查找
  findStoreById(route.query.storeId).then((resp)=>{
    let store = resp.data;
    storeForm.id = store.storeId;
    storeForm.name = store.storeName;
    storeForm.storeImg = store.storeImg;
    storeForm.deliveryStartPay = store.deliveryStartPay;
    storeForm.deliveryPay = store.deliveryPay;
    storeForm.startWeek = store.workingTime;
    storeForm.storeDesc = store.storeDesc;
    storeForm.endWeek = store.restTime;
    storeForm.storeCategoryId = store.storeCategoryId;
  }).catch((error)=>{

  })
}



//加载全部商铺分类
getStoreCategoryList({}).then((resp) => {
    if(storeCategoryList.length != 0){
        storeCategoryList = []
    }
    if (resp.data) {
        storeCategoryList.push(... resp.data)
    }
})



let handleAddStoreItem = () => {
    dialogFormVisible.value = true;
}


//图片上传相关方法
const handleAvatarSuccess = (resp, file) => {
    storeForm.storeImg = resp.data;
}

//图片上传之前的判断
const beforeAvatarUpload = (file) => {
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isJPG) {
        ElMessage.error('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
}

//添加分类
let handleCategorySave = () => {
    saveStoreCategory(storeCategoryForm).then((resp) => {
        dialogFormVisible.value = false
        if(resp.code == 200){
            //刷新商铺分类
            getStoreCategoryList()
        }
    });
}

let handleSave = () => {
    saveStoreInfo(storeForm).then((resp) => {
        if(resp.code == 200){

        }
    });
}
</script>



<style scoped>
.content {
    margin-top: 40px;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>